<h3 class="section-label">
  AUTHENTICATION SECRETS
</h3>
<small>Manage the Authentication options available for different importers.</small>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-7">
      <div id="pf-list-standard" class="list-group list-view-pf list-view-pf-view">
        <div class="toolbar-pf">
          <div class="col-sm-12">
            <pfng-toolbar [config]="toolbarConfig" (onFilterChange)="handleFilter($event)"></pfng-toolbar>
          </div>
        </div>
        <div *ngFor="let secret of secrets" class="list-group-item">
          <div class="list-view-pf-main-info">
            <div class="list-view-pf-left">
              <span class="fa fa-key list-view-pf-icon-sm"></span>
            </div>
            <div class="list-view-pf-body">
              <div class="list-view-pf-description">
                <div class="list-group-item-heading secretName">{{ secret.name }}</div>
                <div class="list-group-item-text">{{ secret.description }}</div>
              </div>
              <div class="list-view-pf-additional-info">
                <div class="list-view-pf-additional-info-item" placement="right">
                  <span class="fa fa-cogs"></span> Usages
                </div>
              </div>
            </div>
            <div class="list-view-pf-actions">
              <div class="dropdown pull-right dropdown-kebab-pf" dropdown>
                <button id="dropdownKebabRight" class="btn btn-link dropdown-toggle" type="button" dropdownToggle
                    aria-controls="dropdown-action"aria-expanded="true">
                  <span class="fa fa-ellipsis-v"></span>
                </button>
                <ul id="dropdown-actions" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
                  <li><a (click)="editSecret(secret)">Edit</a></li>
                  <li><a (click)="confirmDeleteDialog.open(secret)">Delete</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <pfng-pagination [config]="paginationConfig" (onPageNumberChange)="handlePageNumber($event)"
        (onPageSizeChange)="handlePageSize($event)">
      </pfng-pagination>
    </div>

    <div class="col-md-5">
      <form class="form-horizontal">
        <fieldset>
          <legend>
            <div [ngSwitch]="createOrUpdateBtn">
              <span *ngSwitchCase="'Update'"><span class="fa fa-key"></span> '{{ secret.name }}' Secret</span>
              <span *ngSwitchDefault><span class="fa fa-key"></span> New Secret</span>
            </div>
          </legend>
          <div class="control-group">
            <label class="control-label required-pf" for="name">Name</label>
            <div class="controls">
              <input type="text" placeholder="eg. GitLab secret" id="name" name="name" class="form-control" size="20"
                [(ngModel)]="secret.name" (ngModelChange)="updateSecretProperties()" required />
              <p class="help-block">The name this secret will have for later referencing it (should be unique).</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label required-pf" for="name">Description</label>
            <div class="controls">
              <input type="text" placeholder="eg. Secret for accessing corporate GitLab" id="description"
                name="description" class="form-control" size="20" [(ngModel)]="secret.description"
                (ngModelChange)="updateSecretProperties()" required />
              <p class="help-block">The description of this secret.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="authenticationType">Authentication Type</label>
            <div class="controls">
              <select class="form-control" name="authenticationType" [(ngModel)]="authenticationType">
                <option value="none">None</option>
                <option value="basic">Basic Authentication</option>
                <option value="token">Token Authentication</option>
              </select>
              <p class="help-block">The type of Authentication if required.</p>
            </div>
          </div>
          <div class="control-group" *ngIf="authenticationType === 'basic'">
            <label class="control-label" for="username">Username</label>
            <div class="controls">
              <input type="text" placeholder="eg. Service account" id="username" name="username" class="form-control"
                size="20" [(ngModel)]="secret.username" (ngModelChange)="updateSecretProperties()" />
              <p class="help-block">The username information for authentication.</p>
            </div>
          </div>
          <div class="control-group" *ngIf="authenticationType === 'basic'">
            <label class="control-label" for="username">Password</label>
            <div class="controls">
              <input type="password" placeholder="eg. Service account password" id="password" name="password"
                class="form-control" size="20" [(ngModel)]="secret.password"
                (ngModelChange)="updateSecretProperties()" />
              <p class="help-block">The credentials information for authentication.</p>
            </div>
          </div>
          <div class="control-group" *ngIf="authenticationType === 'token'">
            <label class="control-label" for="token">Token</label>
            <div class="controls">
              <input type="text" placeholder="eg. UrLi_zws6JxWDqNge9Ux" id="token" name="token" class="form-control"
                size="20" [(ngModel)]="secret.token" (ngModelChange)="updateSecretProperties()" />
              <p class="help-block">The token to send to remote repository.</p>
            </div>
          </div>
          <div class="control-group" *ngIf="authenticationType === 'token'">
            <label class="control-label" for="tokenHeader">Token Header</label>
            <div class="controls">
              <input type="text" placeholder="eg. Private-Token" id="tokenHeader" name="tokenHeader"
                class="form-control" size="20" [(ngModel)]="secret.tokenHeader"
                (ngModelChange)="updateSecretProperties()" />
              <p class="help-block">The header to use for sending token. If not specified, assume it is the
                Authorization header set to <code>Bearer: ABOVE_TOKEN_VALUE</code></p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="caCertPem">CA Certificate</label>
            <div class="controls">
              <textarea class="form-control" rows="5" id="caCertPem" name="caCertPem" [(ngModel)]="secret.caCertPem"
                (ngModelChange)="updateSecretProperties()"></textarea>
              <p class="help-block">The PEM format CA certificate chain. Copy/Paste here from the clipboard.</p>
            </div>
          </div>
          <br />
          <div class="pull-right">
            <button type="button" class="btn btn-default" (click)="resetEditedSecret()">Reset</button>&nbsp;
            <button type="submit" class="btn btn-primary" (click)="saveOrUpdateSecret(secret)"
              ng-disabled="form.$invalid">{{ createOrUpdateBtn }}</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

<app-confirm-delete-dialog #confirmDeleteDialog (delete)="deleteSecret($event)">
  <p>Do you really want to delete the selected Secret ?</p>

  <div class="alert alert-danger">
    <span class="pficon pficon-error-circle-o"></span>
    <strong>NOTE : </strong>
    <span>This will <strong>permanently</strong> delete the Secret from Microcks. All Importers using this Secret may be
      broken ! This operation cannot be undone.</span>
  </div>
</app-confirm-delete-dialog>